/* 表格样式 */  
table {  
    width: 100%; /* 表格宽度设置为100% */  
    border-collapse: collapse; /* 合并表格边框 */  
    margin: 20px 0; /* 表格上下外边距为20px */  
    font-size: 18px; /* 表格字体大小 */  
    text-align: left; /* 表格内容左对齐 */  
}  
  
/* 表格头部样式 */  
th {  
    background-color: #f2f2f2; /* 表头背景颜色 */  
    padding: 12px; /* 表头内边距 */  
    border: 1px solid #ddd; /* 表头边框 */  
    cursor: pointer; /* 鼠标悬停在表头上时显示为手型，表示可点击排序 */  
}  
  
/* 表格主体样式 */  
td {  
    padding: 12px; /* 表格单元格内边距 */  
    border: 1px solid #ddd; /* 表格单元格边框 */  
}  
  
/* 表格行悬停样式 */  
tr:hover {  
    background-color: #f5f5f5; /* 鼠标悬停在行上时改变背景颜色 */  
}  
  
/* 搜索输入框样式 */  
#searchInput {  
    padding: 10px; /* 输入框内边距 */  
    width: calc(100% - 40px); /* 输入框宽度为父元素宽度的100%减去左右内边距和边框的总宽度（这里假设为40px） */  
    font-size: 16px; /* 输入框字体大小 */  
    margin: 10px 0; /* 输入框上下外边距 */  
    border: 1px solid #ccc; /* 输入框边框 */  
    border-radius: 4px; /* 输入框边框圆角 */  
}  
  
/* 搜索输入框聚焦样式 */  
#searchInput:focus {  
    outline: none; /* 移除输入框聚焦时的默认轮廓线 */  
    border-color: #80bdff; /* 更改输入框聚焦时的边框颜色 */  
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25); /* 添加输入框聚焦时的阴影效果 */  
}